<template>
    <div class="home">
        <div>
            <el-button type="primary" @click="changeTheme">修改主题</el-button>
            <el-button type="primary" @click="changeStyle">修改列头单元格高度</el-button>
            <span>
                是否分页
                <el-switch v-model="sfPag" @change="switchPag"></el-switch>
            </span>
            <el-button type="primary" @click="clickStart">开始轮播</el-button>
        </div>
        <div id="container" class="fonts_883793"></div>
        <el-pagination
            v-if="sfPag"
            v-model:current-page="currentPage1"
            v-model:page-size="pageSize1"
            :page-sizes="[3, 5, 7, 9]"
            :small="true"
            :total="11"
            @current-change="handleCurrentChange"
        ></el-pagination>
    </div>
</template>

<script>
import {defineComponent, onMounted, ref, reactive, defineCustomElement} from 'vue';
import {TableSheet} from '@antv/s2';
import {ElPagination} from 'element-plus'
import { unset } from 'lodash'
import CustomTooltip from '../utils/CustomTooltip'
export default defineComponent({
    name: 'HomeView',
    components: {
        ElPagination
    },
    setup() {
        const s2DataConfig = {
            fields: {
                columns: ['province', 'city', 'type', 'price'],
            },
            meta: [
                {
                    field: 'province',
                    name: '省份',
                },
                {
                    field: 'city',
                    name: '城市',
                },
                {
                    field: 'type',
                    name: '商品类别',
                },
                {
                    field: 'price',
                    name: '价格',
                }
            ],
            data: [{"province": "浙江1", "city": "杭州", "type": "笔", "price": 1}, {
                "province": "浙江",
                "city": "杭州",
                "type": "纸张",
                "price": 2
            }, {"province": "吉林", "city": "白山", "type": "纸张", "price": 3}, {
                "province": "浙江",
                "city": "杭州",
                "type": "笔",
                "price": 4
            }, {"province": "浙江", "city": "杭州", "type": "纸张", "price": 5}, {
                "province": "浙江",
                "city": "舟山",
                "type": "笔",
                "price": 6
            }, {"province": "浙江", "city": "舟山", "type": "纸张", "price": 7}, {
                "province": "吉林",
                "city": "长春",
                "type": "笔",
                "price": 8
            }, {"province": "吉林", "city": "白山", "type": "笔", "price": 9}, {
                "province": "吉林",
                "city": "长春",
                "type": "纸张",
                "price": 10
            }, {"province": "吉林", "city": "白山", "type": "纸张", "price": 11}]
        }
        const BORDER_COLOR = ref('#CCDBFC');
        // const BACK_COLOR = '#CCDBFC';
        const HEADER_BACK_COLOR = '#E0E9FD';
        const CELL_ACTIVE_BACK_COLOR = '#CCDBFC';
        const TEXT_COLOR = '#000000'
        const HOVER_BACK_COLOR = '#CCDBFC'
        const currentPage1 = ref(1) //当前页数
        const pageSize1 = ref(3) //每页显示数量
        let s2 = null
        let sfPag = ref(false)
        // 自定义主题
        const customTheme = reactive({
            colCell: { //列头样式
                cell: { //列头样式
                    horizontalBorderColor: BORDER_COLOR, //横向边框颜色
                    verticalBorderColor: BORDER_COLOR, //纵向边框颜色
                    verticalBorderWidth: 2, //纵向边框宽度
                    horizontalBorderWidth: 2, // 横向边框宽度
                    padding: {
                        top: 10,
                        right: 10,
                        bottom: 10,
                        left: 10,
                    },
                    backgroundColor: HEADER_BACK_COLOR, //背景颜色
                    interactionState: { //交互效果
                        hover: { //鼠标划过
                            backgroundColor: 'red', //颜色
                            backgroundOpacity: 1, //透明度
                            borderColor:'green',
                            borderWidth:2
                        },
                        selected: {
                            backgroundColor: HOVER_BACK_COLOR, //选中时的颜色
                            backgroundOpacity: 1, //透明度
                        },
                    }
                },
                // text: { //无效不知道为什么
                //     fill: TEXT_COLOR, //文字颜色
                //     fontSize:20,
                //     fontWeight:'bold'
                // },
                bolderText: {
                    fill: 'green',//文字颜色
                    opacity: 1, //文字透明度
                    textAlign:'right', //文字位置
                    textBaseline:'top', //绘制文本时的基线 top | middle | bottom
                    fontSize: 30,
                    // fontWeight: 'bold',
                    // fontFamily:'fonts_883793'
                    fontStyle: "italic"
                },
            }, //列头样式
            splitLine: { //单元格和列头的分割线样式
                horizontalBorderColor: BORDER_COLOR.value, //横向分割线颜色
                horizontalBorderColorOpacity: 1, //横向分割线颜色透明度
                horizontalBorderWidth: 2,//横向分割线宽度
            },//单元格和列头的分割线样式
            dataCell: { //数据单元格样式
                cell: {
                    interactionState: {
                        hover: { //鼠标划过，对应的行，列颜色 及透明度
                            backgroundColor: 'red',
                            backgroundOpacity: 1,
                        },
                        hoverFocus: { //鼠标划过当前单元块的颜色 ，透明度 及边框颜色
                            backgroundColor: CELL_ACTIVE_BACK_COLOR,
                            backgroundOpacity: 1,
                            borderColor: TEXT_COLOR,
                        },
                        selected: { // 选中的颜色及透明度
                            backgroundColor: CELL_ACTIVE_BACK_COLOR,
                            backgroundOpacity: 1,
                        },
                        prepareSelect: { //多选时的边框颜色
                            borderColor: '#000000',
                        },
                    },
                    horizontalBorderColor: CELL_ACTIVE_BACK_COLOR, //横向列的边线颜色
                    verticalBorderColor: CELL_ACTIVE_BACK_COLOR, // 纵向列的边线颜色
                    verticalBorderWidth: 2, // 纵向列的边线宽度
                    horizontalBorderWidth: 2, //横向列的边线宽度
                    // padding: {
                    //     top: 10,
                    //     right: 80,
                    //     bottom: 2,
                    //     left: 0,
                    // },
                    backgroundColorOpacity: 0.5,//列的背景颜色透明度
                    backgroundColor: CELL_ACTIVE_BACK_COLOR, //偶数列背景颜色
                    crossBackgroundColor: HEADER_BACK_COLOR,//奇数列背景颜色
                },
                text: {
                    fill: 'red', //文字颜色
                    fontSize:30,
                    fontWeight:'bold',
                    fontStyle: "normal"
                },
            }, //数据单元格样式
            background:{
                color:'transparent'
            }
        })
        const s2Options = reactive({
            width: 600,
            height: 600,
            style: {
                colCfg: { //列头样式
                    // width: 200,
                    width: (colNode) => {
                        return colNode.width === 0 ? 100 : colNode.width
                        // return colNode.colIndex <= 2 ? 100 : 50
                    },
                    height: 60,
                },
                RowCfg: { //行样式

                },
                cellCfg: { //单元格样式
                    // width: 100,
                    height: 60
                }
            },
            // pagination: { //分页的配置
            //     pageSize: 3, //每页数量
            //     current: 1 // 当前页
            // },
            showSeriesNumber: true, //是否显示序号
            interaction:{
                resize:{
                    colCellHorizontal:false, //是否开启列头水平方向 resize 热区
                    colCellVertical:false,
                    rowCellVertical:false
                }
            },
            conditions:{
                background:[
                    {
                        field: 'province',
                        mapping() {
                            return {
                                // fill 是背景字段下唯一必须的字段，用于指定文本颜色
                                fill: 'red',
                            };
                        },
                    },
                ]
            },
            tooltip: {
                showTooltip: true,
                renderTooltip: (spreadsheet) => new CustomTooltip(spreadsheet),
            },
        })
        //是否显示分页
        const switchPag = (val) => {
            sfPag.value = val
            if(val){
                s2Options.pagination = {
                    pageSize: 3, //每页数量
                    current: 1 // 当前页
                }

            }else{
                unset(s2Options,'pagination')
            }
            s2.setOptions({...s2Options}, true)
            s2.render(false) // 重新渲染，不更新数据
        }
        //翻页
        const handleCurrentChange = (val) => {
            s2Options.pagination.current = val
            s2.setOptions({...s2Options}, true)
            s2.render(false) // 重新渲染，不更新数据
        }
        //切换主题
        const changeTheme = () => {
            customTheme.colCell.cell.backgroundColor = 'red';
            s2.setThemeCfg({
                theme: {
                    ...customTheme
                }
            })
            s2.render(false) // 重新渲染，不更新数据
        }
        const changeStyle = () => {
            s2Options.style.colCfg.height = 100
            s2.setOptions({
                ...s2Options
            }, true)
            s2.render(false) // 重新渲染，不更新数据
        }
        //计时器
        let timer
        // 每次滚动的距离
        const STEP = 20;
        //开始轮播
        const clickStart = () => {
            console.log('clickStart')
            // 如果没有纵向滚动条则不需要触发定时器
            if (!s2.facet.vScrollBar) {
                return;
            }
            timer = setInterval(() => {
                // 获取当前 Y 轴滚动距离
                const { scrollY } = s2.facet.getScrollOffset();
                // 如果已经滚动到了底部，则回到顶部
                if (s2.facet.isScrollToBottom(scrollY)) {
                    console.log('滚动到底部');
                    s2.updateScrollOffset({
                        offsetY: {
                            value: 0,
                            animate: false,
                        },
                    });
                    return;
                }
                console.log('开始滚动, 当前 scrollY:', scrollY);
                s2.updateScrollOffset({
                    offsetY: {
                        value: scrollY + STEP,
                        animate: true,
                    },
                });
            }, 500);
        }
        let container = null
        onMounted(() => {
            container = document.getElementById('container');
            s2 = new TableSheet(container, s2DataConfig, s2Options);
            // 自定义主题
            s2.setTheme(customTheme)
            s2.render();


            // 全局更新字体
            // let cxt = container.children[0].getContext('2d');
            // cxt.fontFamily = 'fonts_883793'

        })
        return {
            currentPage1,
            pageSize1,
            sfPag,
            handleCurrentChange, //翻页
            changeTheme, //变更主题
            changeStyle,
            switchPag,
            clickStart
        }

    }
});
</script>
<style scoped>
#container {
    display: flex;
    align-content: center;
    justify-content: center;
    background-color: #bcbcbc;
}
</style>
<style id="font-face-style">
@font-face {
    font-family: 'fonts_883793';
    src: url('../assets/miaozizimuti-regular.ttf') format('truetype'), url('../assets/miaozizimuti-regular.ttf') format('woff'), url('../assets/miaozizimuti-regular.ttf') format('otf');
    font-weight: normal;
    font-style: normal;
}

.fonts_883793 {
    font-family: 'fonts_883793'
}
</style>